import axios from "axios";

// 第一步：引入vue和vuex
import Vue from "vue"
import Vuex from "vuex"

// 第二步：使用vuex
//Vuex其实本质是Vue的一个插件,所以我们要让Vue使用Vuex这个插件
Vue.use(Vuex)

// 创建一个state
const state = {
    count:0,
    price:99,
    movieList:[]
}
//创建一个mutations对象
// 更改vuex的store中的状态的唯一方法是提交mutation
// mutation中函数的第一个参数就是当前的state对象
//既然 Vuex 的 store 中的状态是响应式的,Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项(修改数据的注意事项)
/*最好提前在你的 store 中初始化好所有所需属性。
    当需要在对象上添加新属性时，你应该使用 Vue.set(obj, 'newProp',123), 或者以新对象替换老对象。例如，利用对象展开运算符 (opens new window)我们可以这样写：state.obj = { ...state.obj, newProp: 123 } */
//  注意：mutation必须是同步函数
const mutations ={
    increment(state){
        state.count++
    },
    //mutation中的函数的第二个参数载荷(payload) 都是接收commit的传参
  //vuex还是希望payload是一个对象,这样可以传递多个参数,接收时需要解构传过来的参数
  incrementN(state,{n}){
    state.count += n
  },
  setMovieList(state,movieList){
    state.movieList = movieList
  }
}

//创建action
/* 
  Action 类似于 mutation，不同在于：
    Action 提交的是 mutation，而不是直接变更状态。
    Action 可以包含任意异步操作。
*/
const actions ={
   async getMovieList ({commit}){
        const result =await axios.get("https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a")
        commit('setMovieList',result.data.data.list)
    }
}

//getters对象
// 有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数等等 需要计算，我们就用到了getters 类似于vue中的计算属性
// getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

const getters ={
    myMovieList(state){
//因为数据是state派生出来的，所以getters中的函数接收一个参数是state
       return state.movieList.filter((item)=>{
            return item.albumName.length>3&&item.albumName.length<7
       }) 

    },

    //可以传参的getters
    yourMovieList(){
        //如果计算属性在计算的时候，需要接收参数，则getters函数需要返回一个函数
        return({start,end})=>{
            return state.movieList.filter((item)=>{
                return item.albumName.length>start&&item.albumName.length<end
           })
        }
    }
}




// 第三步：创建一个store（vuex的实例），参数是一个配置对象，在配置对象中可以配置actions,mutations,state,getters等等
// 需要暴露出去供vue实例的配置项挂载
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})
